<template>
	<el-dialog :visible.sync="addVisible" @close="$emit('update:addVisible',false)" width="60%" :show-close='false' class="itemChooseDialog"
	 :closeOnClickModal='false'>
		<span slot="title" class="dialog-title">
		  	选择检测项目
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<div class="selectw100 seachTip">
			<div class="inlineblock verticalmiddle infoitem">
				<div class="inlineblock verticalmiddle">
					名称
				</div>
				<div class="inlineblock verticalmiddle informationItem">
					<el-input style="" v-model="searchName" size="mini" placeholder="检测项目名称" @keyup.enter.native="getItemList"></el-input>
				</div>
			</div>
			<div class="inlineblock basicRightDistanceA searchIcon">
				<el-button size="mini" @click="getItemList">搜索</el-button>
			</div>
		</div>
		<div class="heighHalf">
			<el-table :data="itemList" style="width: 100%" size="mini" class="tableCon" height="100%" @selection-change="handleSelectionChange"
			 ref="multipleTable">
				<el-table-column fixed type="selection" width="38px">
				</el-table-column>
				<el-table-column label="序号" min-width="50px">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
        <el-table-column property="name" label="检测项目" min-width="200px" :show-overflow-tooltip="true">
        </el-table-column>

				<el-table-column property="status" label="状态" min-width="80px" :formatter="formatter">
				</el-table-column>
			</el-table>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" size="mini" @click="subItem">确 定</el-button>
			<el-button  size="mini" @click="close">取 消</el-button>
		</span>
	</el-dialog>

</template>

<script>
	import { mapState } from 'vuex'

	export default {
		data() {
			return {
				itemList: [], //qc计划列表
				multipleSelection: [], //选中的主仪器
				searchName:'',
			}
		},
		props: ['addVisible',],
		components: {

		},

		computed: {
			...mapState(['objectSelect', 'groupSelect', 'enableStatus']),
		},
		mounted() {

		},
		watch:{
			addVisible(val, oldVal){
        console.log(val)
				if(val){
					this.getItemList();
				}
			}
		},
		methods: {
			formatter(row, column, cellValue) {
				return this.util.changeStatus({ cellValue: cellValue, list: this.enableStatus })
			},

			getItemList() {
				this.$http({
					method: 'post',
					apiUrl: '/technology/chooseItem.htm',
					params:{name:this.searchName},
					isJson:false,
				}).then(res => {
					if (res.code === 0) {
						this.itemList = res.data;
					}

				})
			},
			// 选择主仪器  只可单选
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			// 保存选中的主辅仪器
			subItem() {
				if(this.multipleSelection.length == 0){
					this.$notify({
						type: 'success',
						title:"警告",
						message: '请先选择能力参数！'
					});
					return;
				}
				var url = '/technology/syncItem.htm';
				this.$http({
					method: 'post',
					apiUrl: url,
					params: this.multipleSelection,
					isJson: true,
				}).then(res => {
					if (res.code === 0) {
						this.$notify({
							type: 'success',
							title:"成功",
							message: '添加成功'
						});
            this.$parent.readItemList(this.$parent.readQuery);
						this.close();
					}

				})
			},
			// 清除选中
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},

			//关闭
			close(formName) {
				this.$emit('update:addVisible', false);
				this.toggleSelection()
			},
		}
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.itemChooseDialog .el-dialog {
		margin-top: 10vh !important;
		height: 80%;
	}

	.itemChooseDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 10px;
	}

	.itemChooseDialog .heighHalf {
		height:calc(100% - 60px)
	}
	.itemChooseDialog .heighHalf .el-table{
		height: 100%;
	}
	.itemChooseDialog .heighHalf .height40 {
		height: 40px;
		line-height: 40px;
	}

</style>
